/** * 左边菜单 */
<template>
  <!--  background-color="#304156"-->
  <!--    active-background-color="#304156"-->
  <div>  
    <el-menu
      :default-active="$route.meta.index"
      :collapse="collapsed"
      collapse-transition
      router
      unique-opened 
      class="el-menu-vertical-demo"
      background-color="#ffffff" 
      text-color="#757575"
      active-text-color="var(--el-color-primary)">
      <div v-if="menuTitle" class="menu-nav-title">
        {{ menuTitle }}1
      </div>
      <div v-for="menu in allmenu" :key="menu.id">
        <el-sub-menu
          v-if="menu.hasChildren && menu.hidden"
          :index="menu.attributes.url ? '/' +`${h5?menu.attributes.h5url:menu.attributes.url}` : menu.id"
          :key="menu.id">
          <template #title>
            <el-icon>
              <component
                :is="menu.attributes.icon ? menu.attributes.icon : 'Menu'" />
            </el-icon>
            <span>{{ menu.text }}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item-group v-if="menu.hasChildren">
            <div v-for="chmenu in menu.children">
              <el-menu-item
                v-if="!chmenu.hasChildren "
                :index="'/' +`${h5?chmenu.attributes.h5url:chmenu.attributes.url}`"
                :key="chmenu.id"
                @click="handleOpen2(chmenu)">
                <el-icon>
                  <component
                    :is="
                      chmenu.attributes.icon ? chmenu.attributes.icon : 'Menu'
                    " />
                </el-icon>
                <template #title>
                  <span>{{ chmenu.text }}</span> 
                  <el-badge v-if="chmenu.badge&&badgeObjs[chmenu.badge]&&chmenu.badge!='schootstatus'" :offset="[10, 5]" :value="badgeObjs[chmenu.badge]" :max="99" class="items-todhsejr" /> 
                  <el-badge v-if="chmenu.badge&&badgeObjs[chmenu.badge]&&chmenu.badge=='schootstatus'" color="green" :offset="[10, 5]" :value="badgeObjs[chmenu.badge]" :max="99" class="items-todhsejr" /> 
                </template>
              </el-menu-item>
              <el-sub-menu
                v-else
                :index="
                  chmenu.attributes.url
                    ? '/' +`${h5?chmenu.attributes.h5url:chmenu.attributes.url}`
                    : chmenu.id
                ">
                <template #title>
                  <el-icon>
                    <component
                      :is="
                        chmenu.attributes.icon ? chmenu.attributes.icon : 'Menu'
                      " />
                  </el-icon>
                  <span>{{ chmenu.text }}</span>
                </template>
                <el-menu-item
                  v-for="cchmenu in chmenu.children"
                  :index="
                    cchmenu.attributes.url
                      ? '/' + `${h5?cchmenu.attributes.h5url:cchmenu.attributes.url}`
                      : cchmenu.id
                  "
                  :key="cchmenu.id"
                  @click="handleOpen2(cchmenu)">
                  <el-icon>
                    <component
                      :is="
                        cchmenu.attributes.icon
                          ? cchmenu.attributes.icon
                          : 'Menu'
                      " />
                  </el-icon>
                  <template #title>
                    <span>{{ cchmenu.text }}</span>
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </div>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item
          v-if="!menu.hasChildren && menu.hidden&&h5_hides(menu)&&!menu.h5Show"
          :index="'/' + `${h5?menu.attributes.h5url:menu.attributes.url}`"
          :key="menu.id"
          @click="handleOpen2(menu)">
          <el-icon>
            <component
              :is="menu.attributes.icon ? menu.attributes.icon : 'Menu'" />
          </el-icon>
          <template #title>
            <span>{{ menu.text }}</span>
          </template>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, getCurrentInstance, computed,defineProps } from "vue";
import XEUtils from "xe-utils";
import { useMutitabsStore } from "@/store/mutitabs";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { setStorage, getStorage } from "@/utils/util";
import {caicount} from "@/api/api"
let bus = getCurrentInstance().appContext.config.globalProperties.$Bus; // 声明$Bus
const mutitabsStore = useMutitabsStore();
let badgeObjs=ref({})
let collapsed = ref(false);
let allmenu = ref([]);
let menuTitle = ref("");
// const userInfo = JSON.parse(getStorage("groupId"));
const userInfo = ref("");
const props = defineProps({
  h5:{
    type:Boolean, 
    default:false
  }
})

function caicountOpen() {
  caicount().then((res) => {
    if(res.code===1){
      badgeObjs.value=res.data;
      let objs={
        course:res.data.course,
        zdguser:res.data.zdguser,
        zxguser:res.data.zxguser

      } 
      setStorage("courseObj", JSON.stringify(objs))
    }
  })
}
function handleOpen2(obj) {
  if(props.h5){ 
    obj.attributes.url=obj.attributes.h5url
  } 
  mutitabsStore.editableTabs(obj);

  // 点击之后的路由
  caicountOpen();
}
function getMenu() {
  menuTitle.value = "";
  allmenu.value = [];

  //动态加载菜单
  allmenu.value = JSON.parse(getStorage("allmenu"));
}

// 菜单处理---权限
function handleMenuVisibility(menus, idsToShow) { 
  menus.forEach((menu) => {
    if (idsToShow.includes(menu.id)) {
      menu.hidden = false;
    } 
  });
}

function h5_hides(m){
  // h5隐藏就不显示 h5_hides
  if(props.h5&&m.h5hide)return false
  return true
}
 
onMounted(() => {
  let userId = mutitabsStore.userId;
  let idsToShow = [];
  let params = {
    userId: userId,
  };
  getMenu();
  caicountOpen();
  bus.on("toggle", (value) => {
    collapsed.value = !value;
  });
  bus.on("routeReload", (value) => {
    getMenu();
  });
// 1 超管 2 在线区域负责人 3 在地区域负责人 4 在地工作人员 5 在线工作人员
	// 正确逻辑 1超管 2在地区域负责人 3线上区域负责人 4在地工作人员 5为线上工作人员
  
  userInfo.value = JSON.parse(getStorage("groupId"));
  // if (userInfo.value == "1" || userInfo.value == 1) {
  //   idsToShow = ["1"]; // 隐藏的id数组
  // }
  // // 在地区域负责人
  // if (userInfo.value == "2" || userInfo.value == 2) {
  //   idsToShow = ["1", "2", "3", "7", "8"]; // 隐藏的id数组
  // }

  // // 在线区域负责人
  // if (userInfo.value == "3" || userInfo.value == 3) {
  //   idsToShow = ['1',"2", "3", "4", "5", "6"]; // 隐藏的id数组
  // }

  // // 在地工作人员管理
  // if (userInfo.value == "4" || userInfo.value == 4) {
  //   idsToShow = ["1", "3", "4", "7", "8", "2"]; // 隐藏的id数组
  // }

  // // 在线工作人员管理
  // if (userInfo.value == "5" || userInfo.value == 5) {
  //   idsToShow = ["1", "3", "4", "5", "6", "2"]; // 隐藏的id数组
  // }
  // handleMenuVisibility(userInfo.value, idsToShow);
  // console.log(allmenu.value,'-----------------------allmenu.value')
});
onBeforeRouteUpdate((to) => {
  // if(mutitabsStore.logintoken) {
  //     getMenu()
  // }
  mutitabsStore.switchtabNoRoute(to.name, to.query);
});
</script>
<style lang="scss" scoped>
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}

.menu-nav-title {
  height: 56px;
  line-height: 56px;
  padding-left: 20px;
  font-size: 20px;
  font-weight: bold;
  background: #eff6ff;
  color: var(--el-color-primary);
  border-bottom: 1px solid #c9e0ff;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}

.el-menu-vertical-demo {
  i {
    margin-right: 5px;
    font-size: 18px;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

::v-deep(.el-menu-item-group__title) {
  padding: 0px !important;
}

.el-menu-item.is-active {
  position: relative;
  /*background-color: rgb(48, 54, 62) !important;*/
  background-color: var(--l-main-sidebar-menu-active-bg) !important;

  &:before {
    width: 2px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--l-main-sidebar-menu-hover-bg);
    display: block;
  }
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
  overflow: hidden;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 10px 0px;
}

.logoimg {
  /*height: 40px;*/
}

.router-link-active {
  color: #ffd04b;
}

.aside span {
  display: none;
}

.el-menu--collapse {
  ::v-deep(.el-sub-menu__icon-arrow) {
    display: none !important;
  }
}

.el-sub-menu {
  /*width: 180px;*/
  width: 100%;
  
}
</style>

<style >
.items-todhsejr {
  margin-bottom: 40px;
  margin-left:5px;
}
</style>
